<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh">
<head>

</head>

<body class="no-skin">
	<div class="page-content-area">
		<div class="page-header">
			<h1>
				Tables <small> <i class="ace-icon fa fa-angle-double-right"></i>
					Static &amp; Dynamic Tables
				</small>
			</h1>
		</div>
		<!-- /.page-header -->

		<!-- 添加按钮 -->
		<button id="testadd" type="button" class="btn btn-success btn-lg"
			data-toggle="modal" data-target="#addTest">AddTest</button>

		<!-- Modal -->
		<div class="modal fade" id="addTest" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">添加试题</h4>
					</div>

					<!-- boby -->
					<div class="modal-body">
						<form id="addTestForm" method="post">
							<p>
								<label>科目：</label><select id="subId" name="subId" class=""></select>
							</p>
							<p>
								<label>试题类型：</label><select id="testType" name="testType"></select><label
									class="testTypeScore"></label>
							</p>
							<p>
								<label>题干：</label>
								<textarea name="content" cols="50" rows="8" placeholder="填写题干"></textarea>
							</p>
							<p>
								<label>选项A:</label><input type="text" name="chooseA"
									placeholder="填写候选答案内容，作为选项A">
							</p>
							<p>
								<label>选项B:</label><input type="text" name="chooseB"
									placeholder="填写候选答案内容，作为选项B">
							</p>
							<p>
								<label>选项C:</label><input type="text" name="chooseC"
									placeholder="填写候选答案内容，作为选项C">
							</p>
							<p>
								<label>选项D:</label><input type="text" name="chooseD"
									placeholder="填写候选答案内容，作为选项D">
							</p>
							<p>
								<label>答案：</label> <span class="answerTotal"> 选项A：<input
									type="checkbox" name="answer" value="A" /> <input type="radio"
									name="answer" value="A"> 选项B:<input type="checkbox"
									name="answer" value="B" /> <input type="radio" name="answer"
									value="B"> 选项C:<input type="checkbox" name="answer"
									value="C" /> <input type="radio" name="answer" value="C">
									选项D:<input type="checkbox" name="answer" value="D" /> <input
									type="radio" name="answer" value="D">
								</span>
							</p>
						</form>
					</div>

					<!-- modal-footer -->
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="addTestSaveBtn" type="submit" class="btn btn-primary">添加</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 详情框 -->
		<div class="modal fade" id="Message" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">详情题型</h4>
					</div>
					<!-- boby -->
					<div class="modal-body">
						<p>
							<label>考试科目：</label><label id="TestSubjectDetails"></label>
						</p>
						<p>
							<label>题目：</label><label id="TestDetails"></label>
						</p>
						<p>
							<label>A：</label><label id="ChooseADetails"></label>
						</p>
						<p>
							<label>B：</label><label id="ChooseBDetails"></label>
						</p>
						<p>
							<label>C：</label><label id="ChooseCDetails"></label>
						</p>
						<p>
							<label>D：</label><label id="ChooseDDetails"></label>
						</p>
						<p>
							<label>答案：</label><label id="AnswerDetails"></label>
						</p>
					</div>

					<!-- modal-footer -->
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>



		<!-- 修改Modal -->
		<div class="modal fade" id="editTest" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">修改试题</h4>
					</div>

					<!-- boby -->
					<div class="modal-body">
						<form id="editTestForm" class="editTestForm" method="post">
							<p>
								<label>科目：</label><select id="subEditId" name="subId"
									class="editSubId"></select>
							</p>
							<p>
								<label>试题类型：</label><select id="testTypeEdit" name="testType"
									class="edittestTypeEdit"></select><label class="testTypeScore"></label>
							</p>
							<p>
								<label>题干：</label>
								<textarea id="editTextArea" name="content" cols="50" rows="8"
									placeholder="填写题干"></textarea>
							</p>
							<p>
								<label>选项A:</label><input id="editChooseA" type="text"
									name="chooseA" placeholder="填写候选答案内容，作为选项A"
									value="${testModel.chooseA}">
							</p>
							<p>
								<label>选项B:</label><input id="editChooseB" type="text"
									name="chooseB" placeholder="填写候选答案内容，作为选项B"
									value="${testModel.chooseB}">
							</p>
							<p>
								<label>选项C:</label><input id="editChooseC" type="text"
									name="chooseC" placeholder="填写候选答案内容，作为选项C"
									value="${testModel.chooseC}">
							</p>
							<p>
								<label>选项D:</label><input id="editChooseD" type="text"
									name="chooseD" placeholder="填写候选答案内容，作为选项D"
									value="${testModel.chooseD}">
							</p>
							<p>
								<label>答案：</label> <span class="answerTotal"> 选项A：<input
									type="checkbox" name="answer" value="A" /> <input type="radio"
									name="answer" value="A"> 选项B:<input type="checkbox"
									name="answer" value="B" /> <input type="radio" name="answer"
									value="B"> 选项C:<input type="checkbox" name="answer"
									value="C" /> <input type="radio" name="answer" value="C">
									选项D:<input type="checkbox" name="answer" value="D" /> <input
									type="radio" name="answer" value="D">
								</span>
							</p>
						</form>
					</div>

					<!-- modal-footer -->
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="editTestSaveBtn" type="submit"
							class="btn btn-primary editTestSaveBtn">修改</button>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
				<div class="row">
					<div class="col-xs-12">
						<table id="sample-table-1"
							class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>题号</th>
									<th>科目</th>
									<th>题干</th>
									<th>选项A</th>
									<th>选项B</th>
									<th>选项C</th>
									<th>选项D</th>
									<th>答案</th>
									<th>题目类型</th>
									<th>题目分数</th>
									<th>操作</th>
								</tr>
							</thead>

							<tbody>
								<c:forEach items="${testModelList.dates }" var="testModel">
									<tr>
										<td>${testModel.id}</td>
										<td>${testModel.subName}</td>
										<td>${testModel.content}</td>
										<td>${testModel.chooseA}</td>
										<td>${testModel.chooseB}</td>
										<td>${testModel.chooseC}</td>
										<td>${testModel.chooseD}</td>
										<td>${testModel.answer}</td>
										<td>${testModel.testType}</td>
										<td>${testModel.testScore}</td>
										<td>
											<div class="hidden-sm hidden-xs btn-group">

												<button ModelId="${testModel.id}"
													class="btn btn-xs btn-info" data-toggle="modal"
													data-target="#editTest">
													<i class="ace-icon fa fa-pencil bigger-120"></i>
												</button>

												<button class="btn btn-xs btn-danger" data-toggle="modal"
													data-target="#delete-${testModel.id}">
													<i class="ace-icon fa fa-trash-o bigger-120"></i>
												</button>

												<button ModelId="${testModel.id}"
													class="btn btn-xs btn-warning" data-toggle="modal"
													data-target="#Message">
													<i class="ace-icon fa fa-flag bigger-120"></i>
												</button>
											</div>

											<div class="hidden-md hidden-lg">
												<div class="inline position-relative">
													<button class="btn btn-minier btn-primary dropdown-toggle"
														data-toggle="dropdown" data-position="auto">
														<i class="ace-icon fa fa-cog icon-only bigger-110"></i>
													</button>

													<ul
														class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">


														<li><a href="#" class="tooltip-success"
															data-rel="tooltip" title="Edit" data-toggle="modal"
															data-target="#edit-${subject.subId}"> <span
																class="green"> <i
																	class="ace-icon fa fa-pencil-square-o bigger-120"></i>
															</span>
														</a></li>

														<li><a href="#" class="tooltip-error"
															data-rel="tooltip" title="Delete" data-toggle="modal"
															data-target="#delete-${subject.subId}"> <span
																class="red"> <i
																	class="ace-icon fa fa-trash-o bigger-120"></i>
															</span>
														</a></li>
														<li><a href="#" class="tooltip-info"
															data-rel="tooltip" title="View"> <span class="blue">
																	<i class="ace-icon fa fa-search-plus bigger-120"></i>
															</span>
														</a></li>
													</ul>
												</div>
											</div> <!-- 删除模态框 --> <!-- Modal -->
											<div class="modal fade" id="delete-${testModel.id}"
												tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
												<div class="modal-dialog" role="document">
													<div class="modal-content">
														<div class="modal-header">
															<button type="button" class="close" data-dismiss="modal"
																aria-label="Close">
																<span aria-hidden="true">&times;</span>
															</button>
															<h4 class="modal-title" id="myModalLabel">删除科目</h4>
														</div>
														<!-- boby -->
														<div class="modal-body">确定要删除${testModel.id}题目吗？</div>

														<!-- modal-footer -->
														<div class="modal-footer">
															<button type="button" class="btn btn-default"
																data-dismiss="modal">关闭</button>
															<a href="deleteTest/${testModel.id}"><button
																	type="button" class="btn btn-primary">确定</button></a>
														</div>
													</div>
												</div>
											</div>
										</td>
									</tr>
								</c:forEach>

							</tbody>

						</table>
						<jsp:include page="../common/page.jsp"><jsp:param
								name="url" value="toManageTest" />
							<jsp:param name="items" value="${testModelList.totalSize}" />
						</jsp:include>
					</div>
					<!-- /.span -->
				</div>
				<!-- /.row -->

				<!-- PAGE CONTENT ENDS -->
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->
	</div>
	<!-- /.page-content-area -->
	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->

	<!--[if !IE]> -->
	<script type="text/javascript">
		window.jQuery
				|| document
						.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.min.js'>"
								+ "<"+"/script>");
	</script>

	<!-- <![endif]-->

	<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
	<script type="text/javascript">
		if ('ontouchstart' in document.documentElement)
			document
					.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.mobile.custom.min.js'>"
							+ "<"+"/script>");
	</script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/bootstrap.min.js"></script>

	<!-- page specific plugin scripts -->
	<script
		src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.bootstrap.js"></script>

	<!-- ace scripts -->
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace-elements.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace.min.js"></script>

	<!-- inline scripts related to this page -->
	<script type="text/javascript">
		jQuery(function($) {
			var oTable1 = $('#sample-table-2')
			//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
			.dataTable({
				bAutoWidth : false,
				"aoColumns" : [ {
					"bSortable" : false
				}, null, null, null, null, null, {
					"bSortable" : false
				} ],
				"aaSorting" : [],

			//,
			//"sScrollY": "200px",
			//"bPaginate": false,

			//"sScrollX": "100%",
			//"sScrollXInner": "120%",
			//"bScrollCollapse": true,
			//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
			//you may want to wrap the table inside a "div.dataTables_borderWrap" element

			//"iDisplayLength": 50
			});
			/**
			var tableTools = new $.fn.dataTable.TableTools( oTable1, {
				"sSwfPath": "../../copy_csv_xls_pdf.swf",
			    "buttons": [
			        "copy",
			        "csv",
			        "xls",
					"pdf",
			        "print"
			    ]
			} );
			$( tableTools.fnContainer() ).insertBefore('#sample-table-2');
			 */

			$(document).on(
					'click',
					'th input:checkbox',
					function() {
						var that = this;
						$(this).closest('table').find(
								'tr > td:first-child input:checkbox').each(
								function() {
									this.checked = that.checked;
									$(this).closest('tr').toggleClass(
											'selected');
								});
					});

			$('[data-rel="tooltip"]').tooltip({
				placement : tooltip_placement
			});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();

				var off2 = $source.offset();
				//var w2 = $source.width();

				if (parseInt(off2.left) < parseInt(off1.left)
						+ parseInt(w1 / 2))
					return 'right';
				return 'left';
			}

		})
	</script>

	<!-- the following scripts are used in demo only for onpage help and you don't need them -->
	<link rel="stylesheet"
		href="${pageContext.request.contextPath }/static/assets/css/ace.onpage-help.css" />
	<link rel="stylesheet"
		href="${pageContext.request.contextPath }/static/docs/assets/js/themes/sunburst.css" />

	<script type="text/javascript">
		ace.vars['base'] = '..';
	</script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace/elements.onpage-help.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace/ace.onpage-help.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/rainbow.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/generic.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/html.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/css.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/javascript.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/static/js/validate.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/static/lib/jquery.validate.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/static/js/managetest.js"></script>
</body>
</html>
